<template>
  <div class="Safe">
    <div class="SafeImg"></div>
    <div class="Safecontent">
      <div class="videoInfoImg"></div>
      <div class="videoInfo">
        <progressBar :params="params"></progressBar>
      </div>
      <div class="videoInfoType">
        <div class="videoInfoTypeTop">
          <div class="VideoLeftLine"></div>
          <div class="VideoRightLine"></div>
          <div class="videoTopLeft">
            <span>公共区域</span>
          </div>

          <div class="videoTopMiddle">
            <span>办公区域</span>
          </div>
          <div class="videoTopRight">
            <span>停车场</span>
          </div>
        </div>
        <div class="videoInfoTypeBottom">
          <div class="videoText">
            <div class="videoTextzs">
              总数<span>{{ videoStatus.public.total }}</span>
            </div>
            <div class="videoTextgzs">
              故障数<span>{{ videoStatus.public.fault }}</span>
            </div>
          </div>
          <div class="videoText">
            <div class="videoTextzs">
              总数<span>{{ videoStatus.work.total }}</span>
            </div>
            <div class="videoTextgzs">
              故障数<span>{{ videoStatus.work.fault }}</span>
            </div>
          </div>
          <div class="videoText">
            <div class="videoTextzs">
              总数<span>{{ videoStatus.parking.total }}</span>
            </div>
            <div class="videoTextgzs">
              故障数<span>{{ videoStatus.parking.fault }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import progressBar from "../../../common/progressBar.vue";
export default {
  components: {
    progressBar,
  },
  data() {
    return {
      videoStatus: {
        public: {
          total: 0,
          fault: 0,
        },
        work: {
          total: 0,
          fault: 0,
        },
        parking: {
          total: 0,
          fault: 0,
        },
      },
      params: {
        leftBottomValue: "报警", //左上文字
        leftTopValue: 30, //左侧数字
        rightBottomValue: "总数", // 右侧文字
        rightTopValue: 50, // 右侧数字
        middleTopText: "", // 中间文字
        middleTopValue: "", // 中间总数
        leftNumberColor: "#3BFFBA", // 左侧数字颜色
        rightNumberColor: "#ffffff", // 右侧数字颜色
        activeColor: "#3BFFBA",
      },
    };
  },
  sockets: {
    sendAqVideoStatus(data) {
      let aqVideoInfo = JSON.parse(data);
      this.params.leftTopValue = parseInt(aqVideoInfo.alarmsNumber);
      this.params.rightTopValue = parseInt(aqVideoInfo.totalNumber);
      try {
        this.videoStatus.public.total = aqVideoInfo.region[0].total;
        this.videoStatus.public.fault = aqVideoInfo.region[0].fault;
        this.videoStatus.work.total = aqVideoInfo.region[1].total;
        this.videoStatus.work.fault = aqVideoInfo.region[1].fault;
        this.videoStatus.parking.total = aqVideoInfo.region[2].total;
        this.videoStatus.parking.fault = aqVideoInfo.region[2].fault;
      } catch (e) {}
    },
  },
};
</script>

<style>
.Safe {
  width: 100%;
  height: 25%;
}
.Safe .SafeImg {
  width: 541px;
  height: 114px;
  background: url("../../../../../static/images/safety/安全管理.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
.Safecontent {
  width: 100%;
  height: calc(100% - 112px);
}
.videoInfoImg {
  width: 732px;
  height: 65px;
  background: url("../../../../../static/images/safety/视频监控.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
}
.videoInfo {
  width: 100%;
  margin: 40px 0;
}
.videoInfoType {
  width: 100%;
  height: calc(100% - 72px);
  margin-top: -40px;
}
.videoInfoTypeTop {
  width: 90%;
  height: 70%;
  margin-left: 50px;
  display: flex;
}
.videoInfoTypeBottom {
  width: 90%;
  height: 30%;
  margin-left: 50px;
  display: flex;
}
.videoTopLeft {
  width: 192px;
  height: 156px;
  background: url("../../../../../static/images/safety/公共区域.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 50px;
  margin-left: 30px;
}
.VideoLeftLine {
  width: 141px;
  height: 5px;
  position: absolute;
  margin-left: 203px;
  margin-top: 101px;
  background: url("../../../../../static/images/safety/连接线.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.VideoRightLine {
  width: 141px;
  height: 5px;
  position: absolute;
  margin-left: 500px;
  margin-top: 101px;
  background: url("../../../../../static/images/safety/连接线.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.videoTopLeft > span {
  font-size: 25px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 270px;
  margin-left: 42px;
}
.videoTopMiddle {
  width: 192px;
  height: 156px;
  background: url("../../../../../static/images/safety/办公区域.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 50px 100px;
}
.videoTopMiddle > span {
  font-size: 25px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 270px;
  margin-left: 42px;
}
.videoTopRight {
  width: 192px;
  height: 156px;
  background: url("../../../../../static/images/safety/停车场.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 50px;
}
.videoTopRight > span {
  font-size: 25px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 270px;
  margin-left: 63px;
}
.videoText {
  width: 30%;
  height: 100%;
  display: flex;
  margin: 0 13px;
}
.videoTextzs {
  font-size: 23px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b4e0f0;
  margin-left: 30px;
  width: 190px;
  height: 50px;
  margin-top: 19px;
}
.videoTextzs > span {
  font-size: 29px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #3dcf40;
  margin-left: 10px;
  line-height: -1px;
}
.videoTextgzs {
  font-size: 23px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b4e0f0;
  width: 190px;
  height: 50px;
  margin-top: 21px;
}
.videoTextgzs > span {
  font-size: 29px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #e63c3c;
  margin-left: 20px;
}
</style>
